<template>
    <div class="user">
        <van-nav-bar title="商品回收" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="cross" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>
        <div class="user-order3">
            <div style="display: flex;padding-top: 16px">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #333333;margin-left: 23px;">
                    商品信息
                </div>
            </div>
            <div style="display: flex;padding-top: 20px;">
                <img :src="cankuInfo.goods.image" alt="" srcset=""
                    style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
                <div
                    style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
                    {{ cankuInfo.goods.name }}</div>

                <div style="padding-top: 70px;display: flex">
                    <div
                        style="float: right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;position: absolute">
                        x1
                    </div>
                    <div
                        style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
                        ￥ {{ cankuInfo.goods.price }}
                    </div>

                </div>

            </div>
        </div>

        <div style="bottom: 90px;text-align: center;position: fixed;left: 75px;">
            <van-button @click="queren1huishou"
                style="width: 234px;height: 44px;border-radius: 100px;text-align: center;font-size: 15px;background-color: #389138;color: #fff;">确认回收</van-button>


        </div>


        <van-popup v-model="showDialog" :style="{ height: '190px', width: '300px', borderRadius: '15px' }">
            <div class="dialog-content" style="text-align: center;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin: 36px;width: 242px;">
                    提交后后台将会把商品折算为同价格的多个商品，放在您的“仓库商品”中可重新进行委托，请注意查看
                </div>
                <div style="text-align: center;display: flex;margin-top: 30px;">
                    <div style="width: 120px;height: 44px;background: #389138;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="queding">
                        <div>确认提交</div>
                    </div>
                    <div style="width: 120px;height: 44px;background: #CCCCCC;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="cancek">
                        <div>取消回收</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { getStorerecover } from '@/api/user'
import { Toast } from 'vant';

export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            rawHtml: '',
            safeHtml: "",
            showDialog: false,
            cankuInfo: {},
            activeIndex:""
        };
    },
    created() {
        this.cankuInfo = JSON.parse(this.$route.query.cankuInfo);
        this.activeIndex = this.$route.query.activeIndex
    },
    methods: {
        queren1huishou() {
            this.showDialog = true
        },
        queding() {
            let obj = {
                ids: this.cankuInfo.id
            }
            getStorerecover(obj).then((res) => {
                this.showDialog = false
                Toast({
                    message: '<img src="../../img/icon.png" style="margin-right:5px;width:20px;height:20px;"></i><span>回收已提交</span>',
                    type: 'html',
                });
            })

        },
        cancek() {
            this.showDialog = false
        },
        onClickLeft() {
            this.$route.params.active = this.activeIndex
            this.$router.back()
        }
    },
    computed: {

    }
}
</script>

<style scoped>
.user-order3 {
    width: 702px;
    height: 300px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>